<template>
  <div class="drawer">
    <div class="drawer-title">
      <span>告警列表</span>
      <a-icon class="close-icon" type="close" @click="handleDrawer" />
    </div>
    <div class="drawer-body">
      <a-form-model layout="horizontal" ref="ruleForm" :model="queryParam" v-bind="formItemLayout">
        <z-form-item :datas="fieldArr" :form="queryParam" :gutter="8">
          <a-col :span="6" slot="submit-action">
            <a-space :size="6">
              <a-button type="primary" @click="onQuery">查询</a-button>
              <a-button @click="onResetForm">重置</a-button>
              <a-button :disabled="isDisabled || Object.keys(selectedRow).length > 0 && selectedRow.disposalStatus == 2" @click="onHandleDispose()">
                {{
                  Object.keys(selectedRow).length > 0 && selectedRow.disposalStatus == 0
                    ? '处置'
                    : Object.keys(selectedRow).length > 0 && selectedRow.disposalStatus == 1
                    ? '处置结果'
                    : Object.keys(selectedRow).length > 0 && selectedRow.disposalStatus == 2
                    ? '已立案'
                    : '处置'
                }}
              </a-button>
            </a-space>
          </a-col>
        </z-form-item>
      </a-form-model>
      <div class="table-page-content" style="margin-top: 10px">
        <z-table
          ref="table"
          rowKey="id"
          selectionType="radio"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        />
      </div>
    </div>
    <!--弹窗区域-->
    <dispose-modal ref="disposeModal" @ok="onQuery" />
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import disposeModal from './alarmCenterDisposeModal'
export default {
  components: { disposeModal },
  data() {
    return {
      loading: false,
      isDisabled: true,
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      },
      queryParam: {},
      selectedRow: {},
      fieldArr: [
        { label: '手机号码', prop: 'cellPhoneNumber', tagType: 'input' },
        { label: '告警类型', prop: 'alarmType', tagType: 'dict-select', dictOptions: []},
        { label: '处置状态', prop: 'disposalStatus', tagType: 'dict-select', dictCode: 'disposal_status'},
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 50,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '手机号',
          dataIndex: 'cellPhoneNumber',
          width: 82,
          align: 'center',
          customRender: (text) => {
            let texts = text.toString()
            return <j-ellipsis value={texts} length={14} />
          },
        },
        {
          title: '告警类型',
          dataIndex: 'alarmType',
          width: 90,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('model_type', text)} length={14} />
          },
        },
        {
          title: '告警程度',
          dataIndex: 'alarmLevel',
          width: 80,
          align: 'center',
          customRender: (text) => {
            return (
              <span class={text == 1 ? 'text_color_1' : text == 2 ? 'text_color_2' : text == 3 ? 'text_color_3' : ''}>
                {this.$filterDictTextByCache('alarm_degree', text)}
              </span>
            )
          },
        },
        {
          title: '处置状态',
          dataIndex: 'disposalStatus',
          width: 70,
          align: 'center',
          customRender: (text) => {
            return (
              <span class={text==0 ? 'text_color_1' : text==2 ? 'text_color_4' :''}>
                {this.$filterDictTextByCache('disposal_status', text)}
              </span>
            )
          }
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          width: 90,
          align: 'center',
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  created() {},
  mounted() {
    this.onQuery()
    this.initDictOptions()
  },
  watch: {},
  methods: {
    handleDrawer() {
      this.$emit('handleDrawer')
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      alarmServiceApi
        .getPreciseList(queryParam)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onSelectedRow(keys) {
      console.log(keys)
      // this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
      this.selectedRow = keys.length > 0 ? keys[0] : {}
    },
    // 处置、处置结果
    onHandleDispose() {
      let type = Object.keys(this.selectedRow).length > 0 && this.selectedRow.disposalStatus==0?'add': Object.keys(this.selectedRow).length > 0 && this.selectedRow.disposalStatus==1?'details':''
      if(type) this.$refs.disposeModal.show(this.selectedRow, type)
    },
    initDictOptions() {
      // 初始化模型配置项
      this.$initDictOptions('model_type').then((res) => {
        if (res.success) {
          let d = [{text: '请选择', value: ''}]
          let datas = res.result.map((item, index)=> {
            if (Number(item.value) <= 11) {
              return {
                text: item.label,
                value: item.value
              }
            }
          }).filter(obj => obj !== undefined)
          this.fieldArr[1].dictOptions = [...d,...datas]
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.drawer {
  width: 600px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;
  .drawer-title {
    background-color: #fff;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }
  .drawer-body {
    padding: 20px;
    position: relative;
    > h3 {
      padding: 10px 0;
      font-weight: bold;
    }
  }
}
.text_color_1 {
  color: #d9001b;
}
.text_color_2 {
  color: #f59a23;
}
.text_color_3 {
  color: #bfbf00;
}
.text_color_4 {
  color: #02a7f0;
}
</style>
